<template>
  <div>
    <!-- 返回、吸顶 -->
    <van-sticky :offset-top="0">
      <NavBarBack :title="datas.spTitle" />
    </van-sticky>
    <!-- 轮播 -->
    <div style="height:200px;overflow:hidden;width:100%;">
      <SwipeBox v-if="datas.swipes"
                :data="{list:datas.swipes}" />
    </div>
    <!-- 产品的具体信息描述 -->
    <div style="width:95%;margin:0 auto">
      <!-- 标题 -->
      <p>
        希铁 ZITAY Sigma适马FP 外置外接电池供电BP-51假电池
      </p>
      <div style="display:flex">
        <div style="font-weight:900">
          <van-tag round
                   color="red"
                   size="large">天猫</van-tag>
          {{datas.title}}
        </div>
        <!-- 价格 -->
        <p style="color:red;flex:4">
          ￥
          <span style="color:red;font-size:20px">{{datas.money}}</span>
          <!-- <van-tag round
                   type="warning">大减价</van-tag> -->
        </p>
        <div style="flex:6;margin-top:5px;">
          <!-- 计时器 -->
          <van-count-down :time="time">
            <template v-slot="timeData">
              <span class="item">{{ timeData.hours + "时" }}</span>
              <span class="item">{{ timeData.minutes + "分" }}</span>
              <span class="item">{{ timeData.seconds + "秒" }}</span>
            </template>
          </van-count-down>
        </div>

        <div style="flex:-20;margin-top:10px">
          <!-- 分享按钮 -->
          <van-tag round
                   size="large"
                   type="primary">
            <van-icon name="browsing-history-o" />分享
          </van-tag>
        </div>
      </div>
      <!-- 原价 -->
      <p style="color:#ccc;font-size:15px">
        原价
        <span style="text-decoration:line-through">￥699</span>
      </p>

      <div style="margin-top:10px;margin-bottom:10px">
        <!-- 优惠券单元格 -->
        <van-coupon-cell :coupons="coupons"
                         :chosen-coupon="chosenCoupon"
                         @click="showList = true" />
        <!-- 优惠券列表 -->
        <van-popup v-model="showList"
                   position="bottom">
          <van-coupon-list :coupons="coupons"
                           :chosen-coupon="chosenCoupon"
                           :disabled-coupons="disabledCoupons"
                           @change="onChange"
                           @exchange="onExchange" />
        </van-popup>
      </div>
      <!-- 产品名称和信息 -->
      <div style="display:flex">

      </div>
      <!-- 推荐和分享按钮 -->
      <van-row style="text-align:center;font-size:14px;color:#7d7e80;margin-top:5px">
        <van-col span="12">
          <van-icon name="like-o" />10+人推荐
        </van-col>
        <van-col span="12">
          <van-icon name="friends-o" />帮我选
        </van-col>
      </van-row>

      <!-- 发货地、快递费、月销售 -->
      <van-row style="margin-top:15px">
        <van-col span="8">
          <span style="font-size:15px;color:#7d7e80">发货</span>
          <van-icon name="location-o" />
          {{datas.dir}}
        </van-col>
        <van-col span="8">
          <p>快递：{{datas.freight}}</p>
        </van-col>
        <van-col span="8">
          <p style="font-size:15px;color:#7d7e80">月销售：{{datas.sold}}</p>
        </van-col>
      </van-row>
      <!-- 服务和宝贝评价 -->
      <p style="margin-bottom:10px">服务：{{datas.server}}</p>
      <i>— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —</i>
      <van-cell is-link
                style="font-size:20px;"
                @click="showPopup">宝贝评价</van-cell>
      <van-tag round
               type="success"
               size="large">全是好评</van-tag>
      <van-popup v-model="show"></van-popup>
      <!-- 头像 -->
      <div style="display:flex;margin-top:5px">
        <van-image round
                   width="30px"
                   height="30px"
                   src="https://img.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png" />
        <!-- 昵称 -->
        <p style="display:inline-block;line-height:30px">周***8（匿名）</p>

      </div>
      <!-- 评论内容 -->
      <p>
        评价方未及时做出评价,系统默认好评!</p>
      <div style="display:flex;margin-top:5px">
        <van-image round
                   width="30px"
                   height="30px"
                   src="https://img.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png" />
        <!-- 昵称 -->
        <p style="display:inline-block;line-height:30px">f***h（匿名）</p>

      </div>
      <!-- 评论内容 -->
      <p>此用户没有填写评价。</p>
      <!-- 宝贝详情 -->
      <div style="text-align:center;margin-top:10px">
        <h4 style="margin-bottom:15px">宝贝详情</h4>
        <van-image v-for="(item,index) in datas.details"
                   :key="index"
                   :src="item"
                   width="100%" />
      </div>
    </div>
    <!-- 加入购物车 -->
    <van-sku v-model="show"
             stepper-title="我要买"
             :sku="sku"
             :goods="goods"
             :hide-stock="sku.hide_stock"
             reset-stepper-on-hide>
      <!-- 自定义 sku-header-price -->
      <template slot="sku-header-price"
                slot-scope="props">
        <div class="van-sku__goods-price">
          <span class="van-sku__price-symbol">￥</span>
          <span class="van-sku__price-num">{{ props.price }}</span>
        </div>
      </template>

      <!-- 自定义 sku actions -->
      <template slot="sku-actions">
        <div class="van-sku-actions">
          <van-button square
                      size="large"
                      type="warning">积分兑换</van-button>
          <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
          <van-button square
                      size="large"
                      type="danger"
                      @click="buy">买买买</van-button>
        </div>
      </template>
    </van-sku>
    <!-- 底部操作栏 -->
    <van-goods-action style="bottom:50px">
      <van-goods-action-icon icon="shop-o"
                             text="店铺"
                             info="12" />
      <van-goods-action-icon icon="chat-o"
                             text="客服"
                             info="2" />
      <van-goods-action-icon icon="cart-o"
                             text="购物车"
                             info="5" />
      <van-goods-action-button type="warning"
                               text="加入购物车"
                               @click="addShop"></van-goods-action-button>
      <van-goods-action-button type="danger"
                               text="立即购买"
                               @click="onClickBuy" />
    </van-goods-action>
  </div>
</template>

<script>
const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元"
};
import NavBarBack from "../../components/navBarBack";
import SwipeBox from "../../components/swipebox";
import { detailApi } from "../../api/index";
export default {
  name: "detail",
  components: {
    NavBarBack,
    SwipeBox
  },
  mounted() {
    detailApi(this.urlId).then(
      res => {
        // 判断后端的接口是否有
        if (res.code === 1) {
          // 赋值
          this.datas = res.data;
        } else {
          this.$toast("该产品已下架");
        }
      },
      err => {
        this.$toast("网络错误，请求失败");
      }
    );
  },
  data() {
    return {
      urlId: this.$route.params.id,
      datas: {},
      time: 30 * 60 * 60 * 1000,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false,
      show: false,
      goods: {
        // 商品标题
        title: "测试商品",
        // 默认商品 sku 缩略图
        picture:
          "https://tse1-mm.cn.bing.net/th?id=OIP.F7GGCa7xABDaI2TrBDRlJwHaHa&w=203&h=203&c=7&o=5&dpr=1.25&pid=1.7"
      },
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            v: [
              {
                id: "30349", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl:
                  "https://tse1-mm.cn.bing.net/th?id=OIP.F7GGCa7xABDaI2TrBDRlJwHaHa&w=203&h=203&c=7&o=5&dpr=1.25&pid=1.7", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl:
                  "https://tse1-mm.cn.bing.net/th?id=OIP.F7GGCa7xABDaI2TrBDRlJwHaHa&w=203&h=203&c=7&o=5&dpr=1.25&pid=1.7" // 用于预览显示的规格类目图片
              },
              {
                id: "1215",
                name: "蓝色",
                imgUrl:
                  "https://tse2-mm.cn.bing.net/th?id=OIP.HLxcFmsXd30zZ05MnSXNgAHaJW&w=203&h=257&c=7&o=5&dpr=1.25&pid=1.7",
                previewImgUrl:
                  "https://tse2-mm.cn.bing.net/th?id=OIP.HLxcFmsXd30zZ05MnSXNgAHaJW&w=203&h=257&c=7&o=5&dpr=1.25&pid=1.7"
              }
            ],
            k_s: "s1" // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          }
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId，下单时后端需要
            price: 100, // 价格（单位分）
            s1: "1215", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1193", // 规格类目 k_s 为 s2 的对应规格值 id
            s3: "0", // 最多包含3个规格值，为0表示不存在该规格
            stock_num: 110 // 当前 sku 组合对应的库存
          }
        ],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [
          {
            // 商品留言
            datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: "留言", // 留言名称
            type: "text", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: "1", // 是否必填 '1' 表示必填
            placeholder: "" // 可选值，占位文本
          }
        ],
        hide_stock: false // 是否隐藏剩余库存
      }
    };
  },
  methods: {
    // 添加到购物车
    addShop() {
      // 1.向接口传入数据
      // 2.把数据存入到vuex
      // console.log(this.datas)
      // 解构
      const { swipes, id, label, spid, spTitle, money } = this.datas;
      const data = {
        src: swipes[0], // 缩略图
        count: 1, // 买的个数
        id, // 产品id
        title: label.substring(0, 6), // 产品名称
        label, // 产品信息
        spid, // 店铺id
        spTitle, // 店铺名称
        money // 价格
      };
      // console.log(data)
      // 存入vuex
      this.$store.commit("saveShop", data);
    },

    onClickBuy() {
      // 跳转到提交订单页面
      this.show = true;
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    showPopup() {
      this.show = true;
    },
    go() {
      this.show = true;
    },
    buy() {
      this.show = false;
      this.$toast("成功加入购物车");
    }
  },
  // 从详情页返回列表页时，让列表页从缓存中拿
  // 路由守卫：路由拦截器---路由权限
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的meta
    to.meta.keepAlive = true; // 让组件缓存
    next(); // 只调用相当于传入了true，如果传入的是false，则阻止了路由跳转
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.item {
  display: inline-block;
  width: 30px;
  margin-right: 5px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #1989fa;
}
</style>